<template>
  <div class="order">
    <el-card>
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="已完成" name="first" :key="'first'">
          <Completed v-if="isFirst"></Completed>
        </el-tab-pane>
        <el-tab-pane lazy label="待付款" name="second" :key="'second'">
          <Notpayment v-if="isSecond"></Notpayment>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="third" :key="'third'">
          <Dropshipping v-if="isThird"></Dropshipping>
        </el-tab-pane>
        <el-tab-pane label="待收货" name="fourth" :key="'fourth'">
          <Collectingcargo v-if="isFourth"></Collectingcargo>
        </el-tab-pane>
        <el-tab-pane label="待评价" name="five" :key="'five'">
          <Toevaluate v-if="isFive"></Toevaluate>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Completed from "@/components/order/Completed.vue";
import Notpayment from "@/components/order/Notpayment.vue";
import Dropshipping from "@/components/order/Dropshipping.vue";
import Collectingcargo from "@/components/order/Collectingcargo.vue";
import Toevaluate from "@/components/order/Toevaluate.vue";

export default {
  data() {
    return {
      activeName: "first",
      isFirst: true,
      isSecond: false,
      isThird: false,
      isFourth: false,
      isFive: false,
    };
  },
  components: {
    Completed,
    Notpayment,
    Dropshipping,
    Collectingcargo,
    Toevaluate
  },
  methods: {
    handleClick(tab) {
      if (tab.name === "first") {
        this.isFirst = true;
        this.isSecond = false;
        this.isThird = false;
        this.isFourth = false;
        this.isFive = false;
      } else if (tab.name === "second") {
        this.isFirst = false;
        this.isSecond = true;
        this.isThird = false;
        this.isFourth = false;
        this.isFive = false;
      }
      else if (tab.name === "third") {
        this.isFirst = false;
        this.isSecond = false;
        this.isThird = true;
        this.isFourth = false;
        this.isFive = false;
      }
      else if (tab.name === "fourth") {
        this.isFirst = false;
        this.isSecond = false;
        this.isThird = false;
        this.isFourth = true;
        this.isFive = false;
      }
      else if (tab.name === "five") {
        this.isFirst = false;
        this.isSecond = false;
        this.isThird = false;
        this.isFourth = false;
        this.isFive = true;
      }
    }
  }
};
</script>

<style scoped>
.el-pagination {
  text-align: center;
  margin: 10px 0px 20px 0px;
}
</style>